<template>
  <div class="inspection-form-B">
    <div class="name">
      {{ planName }}
    </div>
    <div class="option-item" v-for="item in option">
      <div class="icon-box">
        <a-icon type="check-circle" v-if="item.isHasIcon" class="icon" />
      </div>
      <div class="option-name">
        {{ item.name }}
      </div>
      <div class="right">
          <a-icon type="right-square" class="icon"/>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      planName: "",
      option: [
        {
          name: "Sitting room",
          isHasIcon: true,
          isHasRemove: false,
        },
        {
          name: "BedRoom1",
          isHasIcon: false,
          isHasRemove: false,
        },
        {
          name: "BedRoom2",
          isHasIcon: false,
          isHasRemove: false,
        },
        {
          name: "",
          isHasIcon: false,
          isHasRemove: true,
        },
        {
          name: "Toilet",
          isHasIcon: false,
          isHasRemove: false,
        },
      ],
    };
  },
  created() {
    this.planName = this.$route.query.name;
  },
};
</script>
<style scoped>
.inspection-form-B {
  width: 100vw;
  background-color: #f9f9f9;
}
.name {
  padding: 0.1rem 0 0.05rem 0.05rem;
  font-size: 0.08rem;
}
.option-item {
  height: 0.3rem;
  background-color: #fff;
  border-bottom: 0.005rem solid rgb(165, 165, 165);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0.05rem;
}
.icon-box {
  width: 0.15rem;
  height: 0.15rem;
  flex: 1;
}
.option-name {
    font-size: 0.08rem;
    margin-left: 0.04rem;
    flex: 8;
}
.right {
    flex: 1;
}
.icon {
  font-size: 0.14rem;
}
</style>